<form id="app-form1" class="layui-form layuimini-form">

    <table id="currentTable" class="layui-table layui-hide"
           data-auth-index="{:auth('system.gen/index')}"
           data-auth-add="{:auth('system.gen/add')}"
           data-auth-edit="{:auth('system.gen/edit')}"
           data-auth-delete="{:auth('system.gen/delete')}"
           data-auth-export="{:auth('system.gen/export')}"
           data-auth-modify="{:auth('system.gen/modify')}"
           data-auth-gen="{:auth('system.gen/gen')}"
           lay-filter="currentTable">
    </table>

</form>
<!-- 原生 select 模板（推荐） -->
<script type="text/html" id="TPL-select-primary">
    {{# var selectList = d.LAY_COL.selectList; var field = d.LAY_COL.field; }}
    <select name="{{= field }}" class="layui-border select-demo-primary" lay-ignore style="height: 36px; padding: 0 5px;">
        <option value="" style="height: 36px; padding: 0 5px;">请选择</option>
        {{#  layui.each(selectList, function(i, v){ }}
        <option value="{{= i }}" {{= i === d[field] ? 'selected' : '' }} style="height: 36px; padding: 0 5px;">{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<script type="text/html" id="TPL-select-city">
    {{# var selectList = d.LAY_COL.selectList; var field = d.LAY_COL.field; }}
    <select name="{{= field }}" lay-filter="select-demo">
        <option value="">select 方式</option>
        {{#  layui.each(selectList, function(i, v){ }}
        <option value="{{= i }}" {{= i === d[field] ? 'selected' : '' }}>{{= v }}</option>
        {{#  }); }}
    </select>
</script>
<script type="text/html" id="TPL-dropdpwn-demo">
    {{# var field = d.LAY_COL.field; }}
    <button class="layui-btn layui-btn-primary dropdpwn-demo">
        <span>{{= d[field] || '未知' }}</span>
        <i class="layui-icon layui-icon-down layui-font-12"></i>
    </button>
</script>
<script type="text/javascript">
    require(["jquery", "easy-admin"], function ($, ea){

        var init = {
            table_elem: '#currentTable',
            table_render_id: 'currentTableRenderId',
            index_url: 'system.gen/columnList?id={:input("id")}',
            edit_url: 'system.gen/columnSave',
            modify_url: 'system.gen/columnSave',
        };
        var Controller = {
            index: function () {
                ea.table.render({
                    init: init,
                    search: false,
                    defaultToolbar: [],
                    cols: [[
                        {type: 'checkbox'},
                        {field: 'id', title: 'ID'},
                        {field: 'column_name', title: '字段列名'},
                        {field: 'column_comment', title: '字段描述', edit: 'text'},
                        {field: 'column_type', title: '物理类型'},
                        {field: 'is_insert', title: '插入', templet: ea.table.switch},
                        {field: 'is_edit', title: '编辑', templet: ea.table.switch, filter: 'is_edit'},
                        {field: 'is_list', title: '列表', templet: ea.table.switch, filter: 'is_list'},
                        {field: 'is_query', title: '查询', templet: ea.table.switch, filter: 'is_query'},
                        {field: 'query_type', title: '查询方式', templet: '#TPL-select-primary', selectList: {'EQ':'=', 'NE':'!=', 'GT':'>', 'GTE':'>=', 'LT':'<', 'LTE':'<=', 'LIKE':'Like', 'BETWEEN':'Between'}},
                        {field: 'is_required', title: '必填', templet: ea.table.switch, filter: 'is_required'},
                        {field: 'html_type', title: '显示类型', templet: '#TPL-select-primary', selectList: {text:'文本框', image:'单图片', images:'多图片', file:'单文件', files:'多文件', date:'时间组件', editor:'富文本', textarea:'文本域', select:'下拉选择', switch:'开关组件', checkbox:'多选框', radio:'单选框', relation:'关联表', table:'表格选择器', city:'城市选择器',}},
                        {field: 'dict_type', title: '数据字典', edit: 'text'},
                    ]],
                    toolbar: ['refresh'],
                    page: false,
                    done: function(res, curr, count) {

                        var options = this;

                        // 获取当前行数据
                        getRowData = function(elem){
                            var index = $(elem).closest('tr').data('index');
                            return layui.table.cache[init.table_render_id][index] || {};
                        };

                        // 原生 select 事件
                        $('.select-demo-primary').on('change', function(e){
                            var data = getRowData(this); // 获取当前行数据(如 id 等字段，以作为数据修改的索引)
                            // 更新数据中对应的字段
                            let postData = {id: data.id, field: this.name, value: this.value};
                            let modifyReload = true;
                            let tableId = init.table_render_id;
                            ea.request.post({
                                url: init.modify_url,
                                prefix: true,
                                data: postData,
                            }, function (res) {
                                if (modifyReload) {
                                    layui.table.reloadData(tableId);
                                }
                            }, function (res) {
                                ea.msg.error(res.msg, function () {
                                    layui.table.reloadData(tableId);
                                });
                            }, function () {
                                layui.table.reloadData(tableId);
                            });
                        });
                    }
                });

                ea.listen();
            },

            switch: function (data) {
                var option = data.LAY_COL;

                if (!ea.checkAuth('modify', option.init.table_elem)) {
                    return ea.table.list(data);
                }

                option.filter = option.filter || option.field || null;
                option.checked = option.checked || 1;
                option.tips = option.tips || '开|关';

                var value = ea.table.returnColumnValue(data);
                var checked = value === '1' ? 'checked' : '';console.log('value, option.checked, checked', value, option.checked, checked);
                return layui.laytpl('<input type="checkbox" name="' + option.field + '" value="' + data.id + '" lay-skin="switch" lay-text="' + option.tips + '" lay-filter="' + option.filter + '" ' + checked + ' >').render(data);
            },
        };
        Controller.index();
    });
</script>